<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <% 
    String path = request.getContextPath();
  %>
     <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<script src="<%= path %>/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>重大任务</title>
    <link rel="stylesheet" href="<%=path %>/css/semantic.min.css">
    <link rel="stylesheet" href="<%=path %>/css/index.css">
</head>
<body>

<!--导航-->
<nav class="ui inverted segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">中国航天</h2>
            <a href="javascript:void(0)" class="active m-item item m-mobile-hide"><i class="home icon"></i>重大任务</a>
            <a href="<%=path %>/web/product.jsp" class=" m-item item m-mobile-hide"><i class="idea icon"></i>宇航产品</a>
            <a href="<%=path %>/web/science.jsp" class="m-item item m-mobile-hide"><i class="tags icon"></i>空间科学</a>
            <a href="<%=path %>/web/index.jsp" class="m-item item m-mobile-hide"><i class="clone icon"></i>首页</a>
           
           <!-- 搜索框 -->
            <div class="search">
            	<input type="text" id="retrieval" placeholder="请输入您要搜索的内容...">
            	<button id="hunt">检索</button>
            </div>
            
                <style type="text/css">
            	.search{
            		margin-left:80px;
            		margin-top:17px;
            }
            	#hunt{
            		color:#111;
            		border-radius: 10px;
            	}
            	.search input{
            	color: #324b4e;
            	height:30px;
            width: 250px;
            border-radius: 42px;
            border: 2px solid #324B4E;
            background: #F9F0DA;
            	}
            
           </style>
           
        </div>
    </div>

    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>
<!--中间-->

<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <!--header-->
        <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header">探月--嫦娥工程</h3>
                </div>
                <div class="right aligned column">
                </div>
            </div>
        </div>

        <div class="ui attached segment m-padded-tb-large">
            <div class="ui labeled button m-margin-tb-tiny" tabindex="0">
                <button class="ui basic  button"   id="deep">探月与深空探测</button>
                <div class="ui basic teal left pointing label">lunar probe</div>
				
            </div>
            <div class="ui labeled button m-margin-tb-tiny" tabindex="0">
                <button class="ui basic  button"   id="hangtian">中国载人航天工程</button>
                <div class="ui basic  left pointing label">Space</div>
            </div>
            
           
            <a href="http://www.clep.org.cn/" target="_blank" style="font-size:10px" ><<点击进入中国探月与深空探测网>></a>
           
        </div>
 
            <!-- 中间需要循环显示的内容 -->
        	<div class="ui top attached segment teal" id="probe">
        	
				<!-- localRefresh.jsp页面 -->
				   
            </div>
			
	</div>


    </div>




<!--底部-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="<%=path %>/images/articleImages/2150b5d3-b1d0-4307-8fa3-605eddebc6bd.jfif" alt="" class="ui rounded image" style="width: 127px;height:115px;">
                    </div>
                </div>

            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">官方通道</h4>
                <div class="ui inverted link list">
                    <a href="http://www.cnsa.gov.cn/" class="item">国家航天局(CHINA SPACE)</a>
                    <a href="http://www.cnsa.gov.cn/n6758826/index.html" class="item">资源服务(Resource Services)</a>
                    <a href="http://www.aisino.com/" class="item">航天信息(AISINO)</a>
                </div>
            </div>
           
            <div class="seven wide column">
                <h4 class="ui inverted header">国家航天简要</h4>
                <div class="ui inverted link list">
                    <p class="m-text-thin m-text-spaced m-opacity-mini">国家航天局是中华人民共和国负责民用航天管理及国际空间合作的政府机构，履行政府相应的管理职责。对航天活动实施行业管理，使其稳定、有序、健康、协调地发展。代表中国政府组织或领导开展航天领域对外交流与合作等活动</p>
                </div>
            </div>
        </div>

        <div class="ui inverted section divider">

        </div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">版权所有：国家航天局 © 国家航天局新闻宣传中心</p>

    </div>



</footer>



<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/semantic.min.js"></script>

<script type="text/javascript">
var path = "${pageContext.request.contextPath}";
    var subjectId=1;
	$(function(){
		$("#probe").on("click",".p",function(){
			getPageData($(this).data("page"));
		});
		$("#probe").load(path+"/ArticleController?action=classification&pageNum=1&subjectId=1");
		
		 $("#deep").on("click",btn);
		 $("#hangtian").on("click",space);
		 $("#hunt").on("click",check);
	});
	
	
	
	 function btn(){
		$("#probe").load(path+"/ArticleController?action=classification&pageNum=1&subjectId=1");
	}
	 
	 function space(){
		subjectId=2;
			$("#probe").load(path+"/ArticleController?action=classification&pageNum=1&subjectId=2");

	 }
	 
	//模糊搜索内容
		function check(){
			var checkID = $("#box22").data("id");
			var retrieval = $("#retrieval").val();
			$("#probe").load(path+"/ArticleController?action=vague&id="+checkID+"&retrieval="+retrieval);
		}
	 
	function getPageData(pageNum){
		$("#probe").load(path+"/ArticleController?action=classification&subjectId="+subjectId+"&pageNum="+pageNum);
	}
</script>
</body>
</html>